<template>
  <div>
    <el-table
      :show-header="true"
      :data="detaildata"
      :span-method="objectSpanMethod"
      border
      height="80vh"
      stripe
      style="width: 100%;border:1px solid #111111"
      :cell-style="tableCellClass"
      :header-cell-style="headerCellClass"
    >
      <el-table-column
        v-for="(item,i) in tablechildren"
        :key="item"
        :prop="item"
        :label="tableheader[i]"
      ></el-table-column>
    </el-table>
    <el-button icon="el-icon-caret-left" class="drawer-btn" @click="drawer = true">展开</el-button>
    <el-drawer
      size="50%"
      title="选择对比"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="12" style="border-right:1px solid">
          <el-tree
            class="tree"
            ref="tree"
            :data="options"
            show-checkbox
            node-key="label"
            @check-change="getCheckedNodes"
            style="overflow:auto;height:400px"
          />
        </el-col>
        <el-col :span="12" style="border-right:1px solid">
          <el-row>
            <el-table
              class="tree"
              :data="checkedNodes"
              max-height="500px"
              style="border:1px solid #111111"
              :cell-style="tableCellClass"
              :header-cell-style="headerCellClass"
            >
              <el-table-column label="已选中的套管">
                <el-table-column prop="cm_WorkBaseInfo_ID" label="id"></el-table-column>
                <el-table-column prop="label" label="label"></el-table-column>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row style="margin:10px 5%;text-align: right;">
            <el-button type="primary" @click="compare">对比分析</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-drawer>
    <el-row class="footer">
      <el-button type="danger" @click="goback()">返回上一页</el-button>
    </el-row>
  </div>
</template>

<script>
import { Drawer, Cascader } from 'element-ui'
import {
  getWellDetailCompare,
  getCompareData,
  getCompareTree
} from '../../../api/module/dataquery.js'

export default {
  components: {
    elDrawer: Drawer,
    elCascader: Cascader
  },
  data() {
    return {
      detaildata: [],
      tableheader: ['项目', '套管尺寸'],
      tablechildren: ['name', 'type'],
      spanArr: [],
      drawer: false,
      options: [],
      drawerList: [],
      checkedNodes: [],
      checkedNodesList: '',
      form: {},
      pager: {},
      tableCellClass: {
        'border-bottom': '1px solid #111111',
        'border-right': '1px solid #111111'
      },
      headerCellClass: {
        'border-bottom': '1px solid #111111',
        'border-right': '1px solid #111111'
      }
    }
  },
  created() {
    this.form = this.$route.params.filterForm
    this.pager = this.$route.params.pager
    this.getData(this.$route.params.id)
    this.getTree()
  },
  methods: {
    getData(wellName) {
      getWellDetailCompare(wellName)
        .then(res => {
          this.dealData(res.data.data.list)
        })
        .catch(err => {
          this.$message.warning('该井暂无数据！')
        })
    },
    getTree() {
      getCompareTree()
        .then(res => {
          this.options = res.data.data
        })
        .catch(err => {
          this.$message.error('未查询到套管树状数据')
        })
    },
    getCheckedNodes() {
      this.checkedNodes = this.$refs.tree.getCheckedNodes(true)
    },
    compare() {
      this.checkedNodesList = this.checkedNodes
        .map(item => item.cm_WorkBaseInfo_ID)
        .join(',')
      getCompareData({ list: this.checkedNodesList })
        .then(res => {
          this.dealData(res.data.data.list)
          this.drawer = false
        })
        .catch(err => {
          this.$message.error('查询失败，请返回重新查询！')
        })
    },
    handleClose(done) {
      done()
    },
    goback() {
      this.$router.push({
        name: 'wellQuery',
        params: { filterForm: this.form, pager: this.pager }
      })
    },

    // ------------------下面是一些数据处理函数----------------------
    getSpanArr(data) {
      this.spanArr = []
      this.spanArr.push(1)
      let pos = 0
      for (let i = 1; i < data.length; i++) {
        if (data[i].name === data[i - 1].name) {
          this.spanArr[pos]++
          this.spanArr[i] = 0
        } else {
          this.spanArr[i] = 1
          pos = i
        }
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: this.spanArr[rowIndex],
          colspan: this.spanArr[rowIndex] > 0 ? 1 : 0
        }
      }
    },
    dealData(data) {
      this.tableheader = ['项目', '套管尺寸']
      this.tablechildren = ['name', 'type']
      this.detaildata = data
      this.getSpanArr(this.detaildata)
      if (this.detaildata[0]) {
        for (let i in this.detaildata[0]) {
          if (i != 'type' && i != 'name') {
            this.tableheader.push(i)
            this.tablechildren.push(i)
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.drawer-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  background-color: #409eff;
}
.tree {
  margin: auto 5%;
  width: 90%;
}
.footer {
  margin-top: 10px;
  text-align: right;
}
</style>
